<template>
	<view class="bind-account-page">
		<!-- 左上角圆形按钮 -->

		<view class="container">
			<!-- Logo，与登录页一致 -->
			<image class="logo" src="@/static/images/Logo.png" />
			<text class="app-name">「学迹一点通——打卡不匆匆」</text>
		</view>

		<!-- 输入框和绑定按钮 -->
		<view class="form-container">

			<!-- 学号输入框 -->
			<input v-model="formData.sid" class="input" placeholder="请输入学号" placeholder-class="input-placeholder" />

			<!-- 密码输入框 -->
			<input v-model="formData.password" class="input" placeholder="请输入密码" placeholder-class="input-placeholder"
				type="password" />

			<!-- 绑定按钮 -->
			<button class="bind-btn" @click="login">登录</button>
		</view>
	</view>
</template>

<script>
	import { getOne } from '../../utils/back';
	export default {
		data() {
			return {
				formData: {
					sid: "",
					phone: ""
				},
			};
		},
		methods: {
			async login() {
				if (this.formData.name == "" || this.formData.id == "" || this.formData.password == "") {
					uni.showToast({
						title: "姓名或学号或密码未填",
						icon: "none",
					});
					return;
				}
				let data = await getOne(this.formData)
				data = data.data
				console.log(data);
				if(data == null){
					uni.showToast({
						title: "登录失败",
						icon:'none'
					})
					return
				}
				//这里调取后端，检查是否存在该学生，并在站，并把其id、name和phone存进storage
				uni.setStorageSync("id",data.sid)
				uni.setStorageSync("name",data.name)
				uni.setStorageSync("sex",data.sex)
				uni.setStorageSync("dept",data.dept)
				uni.setStorageSync("dorid",data.dorid)
				uni.setStorageSync("phoneNum",data.phone)
				uni.setStorageSync("email",data.email)
				uni.switchTab({
					url: "/pages/checkIn/checkIn",
				});
			}
		},
	};
</script>

<style>
	.bind-account-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #ffffff;
		position: relative;
		/* 为左上角按钮定位 */
	}

	.container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		justify-content: center;
		align-items: center;
		/* 水平居中 */
		margin-bottom: 40px;
		text-align: center;
		/* 文字居中 */
	}

	.logo {
		width: 100px;
		height: 100px;
		border-radius: 20px;
	}
	
	.app-name {
		margin-top: 10px;
		/* 文字与 Logo 的间距 */
		font-size: 18px;
		/* 文字大小 */
		background: #06c516;
		/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
		-webkit-background-clip: text;
		/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;
		/*给文字设置成透明*/
	}

	.form-container {
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.input {
		width: 70%;
		height: 20px;
		/* 输入框高度调整 */
		padding: 8px;
		margin-bottom: 15px;
		/* 输入框之间的间距调整 */
		border: 1px solid #cccccc;
		border-radius: 4px;
		font-size: 14px;
		color: #333333;
	}

	.input-placeholder {
		color: #999999;
		/* 输入框 placeholder 的颜色 */
	}

	.bind-btn {
		width: 25%;
		height: 30px;
		background-color: #007aff;
		/* 按钮背景颜色调整为蓝色 */
		color: #ffffff;
		/* 按钮文字颜色为白色 */
		font-size: 14px;
		/* 按钮文字大小调整 */
		border-radius: 4px;
		padding: 0;
		/* 移除内边距，使用 flex 布局居中 */
		display: flex;
		/* 使用 flex 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		transition: background-color 0.1s ease;
		/* 添加过渡效果 */
	}

	.bind-btn:active {
		background-color: #005bb5;
		/* 按下时的深蓝色 */
	}
</style>